// 主题颜色变量
:root {
  // 主色调
  --quantum-blue: #12204c;
  --laser-cyan: #00ffd1;

  // 辅助色
  --hologram-purple: #6633ff;
  --dark-matter: #222222;

  // 强调色
  --supernova-orange: #ff5f1f;

  // 虫洞渐变
  --wormhole-gradient: linear-gradient(135deg, #3f00ff 0%, #a000ff 100%);

  // 文字颜色
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);

  // 背景色
  --bg-primary: var(--quantum-blue);
  --bg-secondary: rgba(18, 32, 76, 0.8);
  --bg-card: rgba(34, 34, 34, 0.6);

  // 边框颜色
  --border-color: rgba(0, 255, 209, 0.2);

  // 阴影
  --glow-shadow: 0 0 20px rgba(0, 255, 209, 0.3);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

// 全局样式
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family:
    'Space Grotesk',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

// 卡片样式
.el-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
  }

  .el-card__header {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
  }
}

// 按钮样式
.el-button {
  &.el-button--primary {
    background: var(--wormhole-gradient);
    border: none;
    color: var(--text-primary);

    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--glow-shadow);
    }
  }

  &.el-button--success {
    background: var(--laser-cyan);
    border: none;
    color: var(--quantum-blue);

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 20px rgba(0, 255, 209, 0.5);
    }
  }
}

// 菜单样式
.el-menu {
  background: transparent;
  border-right: none;

  .el-menu-item {
    color: var(--text-secondary);

    &:hover,
    &.is-active {
      color: var(--laser-cyan);
      background: rgba(0, 255, 209, 0.1);
    }
  }
}

// 时间轴样式
.el-timeline {
  .el-timeline-item__node {
    background: var(--laser-cyan);
    box-shadow: 0 0 10px var(--laser-cyan);
  }

  .el-timeline-item__tail {
    border-left-color: var(--hologram-purple);
  }
}

// 进度条样式
.el-progress-bar__inner {
  background: var(--wormhole-gradient);
}

// 动画效果
@keyframes glow {
  0% {
    box-shadow: 0 0 5px var(--laser-cyan);
  }
  50% {
    box-shadow: 0 0 20px var(--laser-cyan);
  }
  100% {
    box-shadow: 0 0 5px var(--laser-cyan);
  }
}

.glow-effect {
  animation: glow 2s infinite;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--hologram-purple);
  border-radius: 4px;

  &:hover {
    background: var(--laser-cyan);
  }
}
